<!--********************************************************************
* Copyright© 2000 - 2025 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!--********************************************************************
* 该示例需要引入 
* vue-iclient (https://github.com/SuperMap/vue-iclient)
* mapbox-gl-enhance (https://iclient.supermap.io/web/libs/mapbox-gl-js-enhance/1.12.1-10/mapbox-gl-enhance.js)
*********************************************************************-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title data-i18n="resources.title_componentsAnimateMarkerLayer_Vue"></title>
        <script type="text/javascript" include="vue,jquery" src="../js/include-web.js"></script>
        <script
            type="text/javascript"
            include="mapbox-gl-enhance,iclient-mapboxgl-vue"
            src="../../dist/mapboxgl/include-mapboxgl.js"
        ></script>
        <style>
            #main {
                margin: 0 auto;
                width: 100%;
                height: 100%;
            }
            .radio-group {
                position: absolute;
                left: 10px;
                top: 10px;
                text-align: center;
                background: transparent;
                z-index: 1000;
            }
            .sm-component-radio-button-wrapper {
                background: rgb(0, 0, 0) !important;
                border: 1px solid rgb(73, 73, 73);
                color: rgb(255, 255, 255);
                font-weight: bold;
            }
            .sm-component-radio-button-wrapper:first-child {
                border-left: 1px solid rgb(73, 73, 73);
            }
            .sm-component-radio-button-wrapper:not(:first-child):before {
                background-color: transparent;
            }
        </style>
    </head>

    <body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
        <div id="main">
            <sm-web-map :map-options="mapOptions" style="background:black">
                <sm-animate-marker-layer
                    :features="features"
                    :type="type"
                    text-field="name"
                    :fit-bounds="false"
                    v-bind="param"
                ></sm-animate-marker-layer>
            </sm-web-map>
            <sm-radio-group class="radio-group" v-model="type" @change="changeType">
                <sm-radio-button value="breathingAperture">{{ resources.btn_breathingAperture }}</sm-radio-button>
                <sm-radio-button value="haloRing">{{ resources.btn_haloRing }}</sm-radio-button>
                <sm-radio-button value="rotatingAperture">{{ resources.btn_rotatingAperture }}</sm-radio-button>
                <sm-radio-button value="diffusedAperture">{{ resources.btn_diffusedAperture }}</sm-radio-button>
                <sm-radio-button value="rotatingTextBorder">{{ resources.btn_rotatingTextBorder }}</sm-radio-button>
                <sm-radio-button value="fluorescence">{{ resources.btn_fluorescence }}</sm-radio-button>
            </sm-radio-group>
        </div>
        <script>
            var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
            var url = host + '/iserver/services/map-china/rest/maps/China';
            var param = new SuperMap.QueryBySQLParameters({
                queryParams: {
                    name: 'ProvinceCapital_P@China',
                    attributeFilter: 'SmID > 0'
                }
            });

            var queryService = new mapboxgl.supermap.QueryService(url).queryBySQL(param, function(serviceResult) {
                var recordsets = serviceResult && serviceResult.result && serviceResult.result.recordsets;
                var features = recordsets && recordsets[0] && recordsets[0].features;
                features.features.forEach(function(feature){
                    feature.geometry.coordinates = _unproject(feature.geometry.coordinates);
                    feature.properties.name = feature.properties.NAME;
                });
                new Vue({
                    el: '#main',
                    data() {
                        var mapUrl = host + '/iserver/services/map-china/rest/maps/ChinaDark';
                        var attribution =
                            "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
                            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
                            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
                        return {
                            features: features,
                            type: 'breathingAperture',
                            breathingApertureParam: {
                                width: 80
                            },
                            haloRingParam: {
                                width: 44
                            },
                            rotatingTextBorderParam: {
                                width: 120
                            },
                            param: null,
                            mapOptions: {
                                container: 'map',
                                style: {
                                    version: 8,
                                    sources: {
                                        'raster-tiles': {
                                            attribution: attribution,
                                            type: 'raster',
                                            tiles: [mapUrl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
                                            tileSize: 256
                                        }
                                    },
                                    layers: [
                                        {
                                            id: 'simple-tiles',
                                            type: 'raster',
                                            source: 'raster-tiles',
                                            minzoom: 0,
                                            maxzoom: 22
                                        }
                                    ]
                                },
                                center: [105.98046235680022, 28.528014198723596],
                                zoom: 5.151412188068154,
                                bearing: 0.8568,
                                pitch: 60
                            }
                        };
                    },
                    mounted() {
                        this.param = this.breathingApertureParam;
                    },
                    methods: {
                        changeType() {
                            if (this[this.type + 'Param']) {
                                this.param = this[this.type + 'Param'];
                            } else {
                                this.param = null;
                            }
                        }
                    }
                });
            });

            function _unproject(point) {
                var d = 180 / Math.PI,
                    r = 6378137,
                    ts = Math.exp(-point[1] / r),
                    phi = Math.PI / 2 - 2 * Math.atan(ts);
                for (var i = 0, dphi = 0.1, con; i < 15 && Math.abs(dphi) > 1e-7; i++) {
                    con = 1;
                    dphi = Math.PI / 2 - 2 * Math.atan(ts * con) - phi;
                    phi += dphi;
                }
                return [(point[0] * d) / r, phi * d];
            }
        </script>
    </body>
</html>
